<template>
    <div class="all__container" ref="scrollRef" @scroll="handScrollFunc" >
      <div class="work_share_title">
        <div>
          作品分享
        </div>
      </div>
      <div class="share__list">
        
        <Waterfall :lazyload="false" :breakpoints="breakpoints" :gutter="10" :list="list">
          <template #item="{ item, url, index }">
            <div class="card_content" ref="videoPlayers" @mouseenter="playVideo(index, item)" @mouseleave="pauseVideo(index, item)">
              <div class="card_img water__items" @click="click_image(item)" v-if="item.file_type=='png'"> 
                <LazyImg class="cover" :url="item.path_url" />
                <span class="time__span">{{ item.create_time }}</span>
              </div>

              <div class="water__items video__contains" v-else-if="item.file_type=='mp4'" @click="click_image(item)">
                  <video muted :src="item.path_url" style="width: 100%; height: 100%; object-fit: contain;"></video>
                  <span class="video__icon"><svg-icon name="icon-shipin" :size="30"></svg-icon></span>
                  <span class="time__span">{{ item.create_time }}</span>
                </div>
              
            </div>
          </template>
        </Waterfall>

        <div v-if="!ableLoadMore" class="scroll__botton">已经加载全部~</div>
      </div>
    </div>

    <ImageDialog
        @cancel="cancel"
        :visible="isVisible"
        :instance="click_instance"
    ></ImageDialog>
</template>
           
<script setup>
    import { ref, onMounted } from "vue"
    import ImageDialog from './ImageDialog.vue'
    import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
    import 'vue-waterfall-plugin-next/dist/style.css'

    import { getGenerateShare } from '@/api/homeApi.js'

    const isVisible = ref(false)
    const click_instance = ref({})

    const videoPlayers = ref(null);

    const breakpoints = ref({
      1600: {
        rowPerView: 5,
      },
      1200: {
        rowPerView: 4,
      },
      800: {
        rowPerView: 2,
      },
    })

    const list = ref([])

    const currentPage = ref(1)
    const pageSize = ref(30)
    const total = ref(0)

    const ableLoadMore = ref(false)
    const scrollRef = ref(null)
    const loading = ref(false)
    
    function click_image(instance){
      isVisible.value = true
      click_instance.value = instance
    }

    function cancel(){
      isVisible.value = false
    }

    const handScrollFunc = ()=>{
      if (ableLoadMore.value && scrollRef.value.scrollHeight - (scrollRef.value.scrollTop + scrollRef.value.clientHeight) <= 10){
          loadMore()
      }
    }

    // 获取数据
    const getDataList = async () => {

      var req_data = {
        page: currentPage.value,
        page_size: pageSize.value
      }
      var res = await getGenerateShare(req_data)
      var res_data = res.data
    //   console.log(res)
      list.value = [...list.value, ...res_data.list]
      total.value = res_data.total
      if(total.value <= list.value.length){
        ableLoadMore.value = false
      }

    }

    function loadMore(){
        console.log('loadMore')
        
        
        try{
           setTimeout(()=>{
            if (loading.value) return
            loading.value = true
             getDataList()
            
           }, 100)
        } catch(error) {
            console.log(error)
        } finally{
            loading.value = false
        }
    //     console.log(list.value)
    }

    const playVideo = (index, item) => {

        if (item.file_type=='mp4'){
            var dom_list = document.getElementsByClassName('water__items')
            var video = dom_list[index].getElementsByTagName('video')[0]
        
            // console.log('播放', dom_list[index], video)
            video.loop = true
            video.play()
            
        }

    };

    const pauseVideo = (index, item) => {
        if (item.file_type=='mp4'){
            var dom_list = document.getElementsByClassName('water__items')
            var video = dom_list[index].getElementsByTagName('video')[0]
        
            video.pause()
            // video.currentTime = 0;
            
        }
    };


    onMounted(() =>{
      getDataList()
    })
    
</script>
<style scoped lang="scss">
.water__items{
    position: relative;
    background-color: var(--wchime-bg-color-box);
    .time__span{
        width: 100%;
        position: absolute;
        bottom: 5px;
        left: 0;
        font-size: 14px;
        color: #fff;

    }
}
.video__contains{
    position: relative;
    .video__icon{
        position: absolute;
        top: 5px;
        right: 5px;
    }
}
.all__container{
  width: 100%;
  height: 100%;
  overflow-y: auto;

  .work_share_title{
    display: flex;
    background-color: white;
    padding: 10px 0 0 10px ;
    div{
      font-size: 30px;
    }
  }
}
.card_content{
  
  .cover{
    border: 1px solid rgb(131, 128, 128);
    border-radius: 10px;
  }

  video{
    border: 1px solid rgb(131, 128, 128);
    border-radius: 10px;
  }
}
.cover {
  border-radius: 10px;
}
.scroll__botton{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
  }
</style>